@import "../common/common.scss";

.device-info-page {
    background-color: #f8f9fa;
    padding-top: calc(env(safe-area-inset-top) + 160rpx);
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    box-sizing: border-box;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recordList {
    background: #fff;
    flex: 1;
    height: 0;
    overflow-y: auto;

    .single {
        padding: 24rpx;
    }

}

.titleStatus {
    display: flex;
    justify-content: space-between;

    .title {
        display: flex;
        flex-direction: column;
        gap:14rpx
    }

    .text {
        font-size: 32rpx;
        font-weight: 600;
    }

    .date {
        font-size: 24rpx;
        color: #a0aac2;
    }

    .status {
        height: 36rpx;
        line-height: 36rpx;
        padding: 0 14rpx;
        background: #E6F1FF;
        color: #058aff;
        font-size: 20rpx;
        flex-shrink: 0;
    }
}

.opreator {
    padding-top: 24rpx;
    display: flex;
    justify-content: space-between;
    gap: 60rpx;

    .info {
        display: flex;
        flex-direction: column;
    }

    .avator {
        display: flex;
        justify-content: center;
    }

    .image {
        width: 78rpx;
        height: 78rpx;
        border-radius: 20rpx;
    }

    .name {
        font-size: 32rpx;
        padding-top: 24rpx;
    }


}

.process {
    flex-grow: 1;
    display: flex;

    .top {
        display: flex;
        justify-content: center;
        padding: 24rpx;
        position: relative;

        .dot {

            &::before {
                content: '';
                display: block;
                width: 16rpx;
                height: 16rpx;
                position: absolute;
                background: #e5e5e5;
                border-radius: 50%;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
                z-index: 1;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);

            }

            &::after {
                content: '';
                display: block;
                position: absolute;
                width: calc(100% - 16rpx);
                height: 6rpx;
                background: #E5E5E5;
                top: 50%;
                transform: translateY(-50%);
                left: calc(-50% + 8rpx);
                z-index: 2;
            }
        }

        .whiteDot {
            width: 16rpx;
            height: 16rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            background: #fff;
            border-radius: 50%;
            z-index: 10;
        }

    }

    .step {
        width: 25%;
        flex-grow: 1;
        font-size: 24rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        justify-content: center;

        &:first-child {
            .dot::after {
                display: none;
            }
        }

        &.active {
            .dot {
                &::before {
                    background: #058AFF;
                }

                &::after {
                    background: linear-gradient(to left, rgba(64, 158, 255, 1), rgba(64, 158, 255, 0));
                }
            }
        }

        &.current {
            .dot {
                &::before {
                    background: #fff;
                    width: 32rpx;
                    height: 32rpx;
                    z-index: 9;
                    background: linear-gradient(135deg, #4A90E2, #9B51E0);
                }
            }
        }
    }


}

.companyName {
    color: #058aff;
    font-size: 24rpx;
    padding: 20rpx 0;
}

.gallery {
    width: 100%;
    /* 撑满父容器 */
    white-space: nowrap;
    /* 关键：禁止换行 */
}

.galleryList {
    display: inline-block;
    /* 关键：使容器宽度由内容撑开 */
    height: 200rpx;
    /* 与item高度一致 */
}

.galleryItem {
    display: inline-block;
    height: 100%;
    position: relative;
    margin-right: 20rpx;
    /* 可选：添加间距 */
}

.galleryItem image,
.galleryItem .empty {
    height: 200rpx;
    /* 固定高度 */
    width: 260rpx;
    /* 宽度自适应 */
    min-width: 100rpx;
    /* 可选：防止图片过窄 */
}

.galleryItem .empty {
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;

    .emptyImg {
        width: 80rpx;
        height: 80rpx;
        margin: 0 auto;
    }
}

.company {
    .brife {
        font-size: 24rpx;
        padding: 18rpx 0;
    }
}

.viewList {
    padding: 10rpx 0;
    font-size: 24rpx;

    .iconfont {
        font-size: 24rpx;
    }

    .text {
        display: inline-block;
        padding: 0 12rpx;
    }
}